<template>
  <div class="comprehensive-reproduction-page">
    <main>
      <div class="header">
        <p class="title">底图设置</p>
        <div class="search-container">
          <div class="btns">
            <el-button type="primary" @click="setTags">标签分组</el-button>
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
          </div>
        </div>
      </div>
      <div class="content">
        <el-table
          class="table-container"
          :data="tableData"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          row-key="id">
          <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
          <el-table-column label="底图类型" prop="projectType" align="center">
            <template slot-scope="scope">
              {{ types[scope.row.projectType] || '' }}
            </template>
          </el-table-column>
          <el-table-column label="底图名称" prop="projectTitel" align="center"></el-table-column>
          <el-table-column label="附件" prop="projectPath" align="center">
            <template slot-scope="scope">
              <span
                v-if="scope.row.projectPath"
                class="file-name"
                :title="files(scope.row.projectPath).name"
                @click="handleUpload(scope.row.projectPath)">
                {{ files(scope.row.projectPath).name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" prop="createTime" align="center"></el-table-column>
          <el-table-column label="上传人" prop="publishName" align="center"></el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <el-button
                type="primary"
                size="mini"
                @click="handleSet(scope.row)">
                标签
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'add',
      visible: false,
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      // 1：新闻；2：公告；3 轮播图；4：视频管理；5：模型管理；6：倾斜摄影,7 连接 8：地图
      types: {
        '1': '新闻',
        '2': '公告',
        '3': '图片',
        '4': '视频',
        '5': '模型图例',
        '6': '模型图例',
        '7': '链接',
        '8': '二维地图'
      }
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId
      };
      const { success, data: {
        data
      }} = await this.$Model.getCommonList(params);
      if (success && data) {
        const { list, total } = data;
        console.log(data);
        this.tableData = list || [];
        this.total = total || 0;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 附件
    files(fileUrl) {
      const fileNames = fileUrl ? fileUrl.match(/([^\/])+\.\w+$/) : '';
      const fileName = Array.isArray(fileNames) ? fileNames[0] : '';
      return {
        name: fileName,
        url: this.$checkUrl(fileUrl),
        hasImg: /\.jpg|\.jpeg|\.png$/.test(fileUrl)
      };
    },
    // 下载文件
    handleUpload(fileUrl) {
      fileUrl && window.open(this.$checkUrl(fileUrl));
    },
    // 标签分组
    setTags() {
      this.$router.push('/comprehensive/tags');
    },
    // 标签
    handleSet(row) {

    },
    // 新增
    handleAdd() {

    },
    handleEdit(row) {

    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该选项, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        this.tableLoading = true;
        const { success } = await this.$Model.delddd({
          ids: row.id,
        });
        this.tableLoading = false;
        if (success) {
          this.tableData.length < 2 && this.clear();
          this.getTableData();
          this.$message.success('删除成功');
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/main";
  @import "../../../assets/styles/table";

  .comprehensive-reproduction-page {
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    background-color: $baseBg;
    main {
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: $mainBg;
      .header {
        width: 100%;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 20px;
        .title {
          font-size: 20px;
        }
        .search-container {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 120px);
        .table-container {
          height: 100%;
          /deep/ .el-table__body-wrapper {
            height: calc(100% - 50px);
            padding-bottom: 46px;
            overflow-y: auto;
            .btn {
              padding: 0 5px;
              cursor: pointer;
              color: $mainColor;
            }
            .img {
              width: 60px;
              height: 60px;
            }
            .file-name {
              height: 60px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }
          }
          /deep/ .el-table__header {
            th.is-leaf .el-button span {
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>
